<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./favicon.svg" type="image/svg+xml">
    <title>文件管理系统</title>
    <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/css/bootstrap-icons.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="app-container">
        <div class="app-header">
            <h1 class="app-title">文件管理系统</h1>
            <p class="text-muted">上传、管理和预览您的文件</p>
        </div>
        
        <!-- 文件上传部分 -->
        <div class="upload-section" id="uploadSection">
            <div class="upload-area" id="dropArea">
                <div class="upload-icon">
                    <i class="bi bi-cloud-arrow-up"></i>
                </div>
                <h4>拖拽文件到此处或点击上传</h4>
                <p class="text-muted">支持单个文件上传，最大文件大小 100MB</p>
                <div class="file-input-wrapper">
                    <button class="btn btn-primary">选择文件</button>
                    <input type="file" id="fileInput">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-6">
                    <button class="btn btn-success" onclick="uploadFile()">普通上传</button>
                    <button class="btn btn-primary" onclick="uploadFileInChunks()">分片上传</button>
                </div>
                <div class="col-md-6 text-end">
                    <span class="text-muted">推荐大文件使用分片上传</span>
                </div>
            </div>
            <div class="progress-container">
                <div id="uploadProgress" class="progress-bar">
                    <div class="progress-inner"></div>
                </div>
                <div id="progressText" class="progress-text"></div>
            </div>
            <div id="statusMessage" class="status-message"></div>
        </div>

        <!-- 搜索和过滤 -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="search-box">
                    <i class="bi bi-search search-icon"></i>
                    <input type="text" id="searchInput" placeholder="搜索文件名..." onkeyup="searchFiles()">
                </div>
            </div>
            <div class="col-md-6">
                <div class="file-type-filter">
                    <button class="filter-btn active" data-type="all">全部</button>
                    <button class="filter-btn" data-type="Image">图片</button>
                    <button class="filter-btn" data-type="PDF">PDF</button>
                    <button class="filter-btn" data-type="Document">文档</button>
                    <button class="filter-btn" data-type="Archive">压缩包</button>
                    <button class="filter-btn" data-type="Other">其他</button>
                </div>
            </div>
        </div>

        <!-- 文件列表 -->
        <div class="table-responsive">
            <table id="fileListTable" class="file-list">
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>类型</th>
                        <th>上传时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 文件列表将通过JavaScript动态生成 -->
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 预览模态框 -->
    <div id="previewModal" class="modal">
        <span class="close-modal" onclick="closePreview()">&times;</span>
        <div id="previewContent" class="modal-content"></div>
    </div>

    <script src="./lib/js/bootstrap.bundle.min.js"></script>
    <script src="./lib/js/crypto-js.min.js"></script>
    <script src="./js/main.js"></script>
</body>
</html>